<template>
  <el-container class="container">
    <!-- 左侧树 -->
    <el-aside class="left" width="30%">
        <el-tree 
          :data="data"
          highlight-current
          :props="defaultProps"
          accordion
          node-key="label"
          ref="tree"
          @node-click="handleNodeClick"
          ></el-tree>
    </el-aside>
    <!-- 右侧容器 -->
    <el-container style="flex-flow:column;" class="right">
      <el-card class="box-card" v-show="card.show">
        <el-row slot="header">
          <el-col :span="24" class="el-card_title">{{card.name}}-{{card.tag}}</el-col>
        </el-row>
        <div class="text item">
          <el-row :gutter="10" v-for="(resource, index) in resources" :key="index">
            <el-row>
              <el-col :span="6" class="label">主机</el-col>
              <el-col :span="18" class="val">{{ resource.address }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">IP</el-col>
              <el-col :span="18" class="val">{{ resource.ip }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">用户名</el-col>
              <el-col :span="18" class="val">{{ resource.user }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">密码</el-col>
              <el-col :span="18" class="val">{{ resource.pwd }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="6" class="label">备注</el-col>
              <el-col :span="18" class="val">{{ resource.desc }}</el-col>
            </el-row>
            <el-divider class="divider"></el-divider>
          </el-row>
          <!-- {{item.text}} -->
        </div>
      </el-card>
    </el-container>
  </el-container>
</template>

<script>
const pdb = require('../../lowdb/project') // 项目数据库
const rdb = require('../../lowdb/resource') // 资源数据库
export default {
  name: 'resource',
  data () {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      card: {
        name: '',
        tag: '',
        show: false
      },
      projects: [], // 项目列表
      resources: []
    }
  },
  created () {
    this.initTree()
  },
  methods: {
    handleNodeClick (data, node, curnode) {
      if (node.level !== 1) {
        let parent = curnode.$parent.node.data.label
        this.card.name = parent
        this.card.tag = data.label
        this.card.show = true
        let list = rdb.queryList(this.card) // 查询资源
        if (list !== undefined) {
          this.resources = list.children
        } else {
          this.resources = []
        }
      } else {
      }
    },
    initTree () {
      this.projects = pdb.queryList()
      let treeData = []
      this.projects.forEach(element => {
        treeData.push({ label: element.name, children: element.children })
      })
      this.data = treeData
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 10px;
}
.clearfix {
  display: flex;
  flex-direction: row;
  align-items: right;
}
.left {
  border-right:1px solid #DCDFE6;
}
.box-card {
  width: 100%;
}
.el-card {
  padding-bottom: 10px;
  margin-bottom: 10px;
  overflow: visible;
}
.right {
  padding: 10px;
  overflow-y:auto;
}
.btns {
  display: flex;
  flex-direction: row;
  align-self: flex-end;
  min-height: 40px;
}
.btns span{
  margin-left: 10px;
  cursor: pointer;
}
.divider {
  margin: 5px 0;
}
.label {
  padding: 5px 0;
  text-align: right;
}
.val {
  padding: 5px 0;
  text-align: left;
  padding-left: 15px;
}
</style>
